<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="../../static/mui/css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0; 
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
		    .mui-table-view-cell:after {
		    	background-color: #FFFFFF;
			}
			.mui-card span{
				font-size: 15px;
			}
		    .orderTitle{
		    	list-style: none; 
		    	background-color: #FFFFFF; 
		    	padding-top: 4%;
		    	padding-bottom: 3%;
		    }
		    .orderTitle>li:nth-child(1){
		    	float: left; 
		    	padding-top: 2%;
		    	margin-right: 3%;
		    	font-size: x-large;
		    }
		    .orderTitle>li:nth-child(3){
		    	font-size: small;
		    }
		    .pay-state{
		    	height: 44px;
		    }
		    .pay-state>button{
		    	left: 2%;
		    	border-radius: 12px;
		    }
		    .service-detail{
		    	margin-top: 1%;
		    }
		    .service-detail div{
		    	float: right
		    }
		    .oper-button{
		    	margin-top: 10px; 
		    	text-align: center;
		    	margin-bottom: 100px;
		    } 
			.mui-control-content {
				min-height: 550px;
			}
			/**空列表的样式**/
			.waitempty ul,.finishempty ul,.allempty ul{
		    	list-style: none; 
		    	padding-left: 0px;
		    	margin-top: 45%;
		    }
		    .waitempty li:nth-child(2), 
		    .finishempty li:nth-child(2), 
		    .allempty li:nth-child(2){
		    	margin-top:5%; 
		    	font-size: large;
		    }
		    .waitempty ul li:nth-child(3),
		    .finishempty ul li:nth-child(3),
		    .allempty ul li:nth-child(3){
		    	margin-top:5% 
		    }
	        .waitempty ul li:nth-child(3)>button,
	        .finishempty ul li:nth-child(3)>button,
	        .allempty ul li:nth-child(3)>button{
		     	width: 60%;
		    }
		    .mui-table-view-cell.mui-active{
			    background-color: #FFFFFF;
			}
			.mui-scroll-wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				/*bottom: 10%;
				padding-bottom: 30px;*/
				left: 0;
				overflow: hidden;
				width: 100%;
				margin-bottom: 36px;
			}
			.mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after {
			    font-size: 54px;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			    display: inline-block;
			    width: auto;
			   /* padding: 0 35px;*/
			    padding-left:33px;
			    padding-right: 33px;
		    }
		    
		    @media only screen  and (max-width: 320px) {
				.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				    display: inline-block;
				    width: auto;
				   /* padding: 0 35px;*/
				    padding-left: 26px;
	    		    padding-right: 26px;
		    	}
		    }
			.mui-pull-bottom-tips {
			  text-align: center;
			  background-color: #efeff4;
			  font-size: 15px;
			  line-height: 15px;
			  color: #777;
			}
			.orderList{
				margin-top:12px;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			    color: #DB3B34;
			}
			.mui-table-view-cell {
				padding: 9px 15px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color:#dd524d;">
			<h1 class="mui-title" style="color: #fff;">订单管理</h1>
		</header>
		<div class="mui-content" >
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll ">
						<a style="" class="mui-control-item mui-active" href="#item1mobile">
							待服务
						</a>
						<a style="" class="mui-control-item" href="#item2mobile">
							已完成
						</a>
						<a style="" class="mui-control-item" href="#item3mobile">
							全部订单
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="waitRefresh"  class="mui-scroll-wrapper" style="bottom: 0;padding-bottom: 90px;">
							<div  class="mui-scroll manage-scroll">
								<div class="orderList" id="waitContainer">
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="finishRefresh" class="mui-scroll-wrapper" style="bottom: 0;padding-bottom: 90px;">
							<div class="mui-scroll manage-scroll">
								<div class="orderList" id="finishContainer">
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="allRefresh" class="mui-scroll-wrapper" style="bottom: 0;padding-bottom: 90px;">
							<div class="mui-scroll manage-scroll">
								<div class="orderList" id="allContainer">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../static/mui/js/mui.min.js"></script>
		<script src="../../static/mui/js/mui.pullToRefresh.js"></script>
		<script src="../../static/mui/js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript" src="../../static/lib/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="../../static/app/js/kit.js"></script>
		<script type="text/javascript" src="../../static/app/js/api.js"></script>
		<script>
				//阻尼系数
				//var deceleration = mui.os.ios?0.003:0.0009;			
				mui(".mui-scroll-wrapper").scroll({
					bounce: false,
					indicators: true//, //是否显示滚动条
					//deceleration:deceleration
				});
				mui.plusReady(function() {
					
					/*var self = plus.webview.currentWebview();
					var shopId = self.shopid;*/
					//var shop = Kit.dao.get("SHOP",true);
					var waitFirstUp = true;//第一次上拉刷新如果页面第一次有数据则为false 如果有数据则为false
					var finishFirstUp = true;//第一次上拉刷新如果页面第一次有数据则为false 如果有数据则为false
					var allFirstUp = true;//第一次上拉刷新如果页面第一次有数据则为false 如果有数据则为false
					var upPageSize = 5;
					var downPageSize = 5;
					//上拉加载更多防止没有数据重复发送请求 
					var waitNodata = false;
					var finishNodata = false;
					var allNodata = false;
					
					var waitSelf="";
					var finishSelf="";
					var allSelf="";
					//FLAG 0：全部，1：待接单，2：待服务，3：完成 
					//循环初始化所有下拉刷新，上拉加载。
					mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						mui(pullRefreshEl).pullToRefresh({
							down:{
								callback: function() {
									var self = this;
									setTimeout(function() {
										var orderContainer = self.element.querySelector('.orderList');
										//获得第一条数据的时间
										var lastDateNode = $(orderContainer).children(".mui-card").eq(0);
										var lastDate = null;
										if(lastDateNode && lastDateNode.length>0){
											lastDateValue = lastDateNode.attr("data-date-val");
											if(lastDateValue){
												lastDate=lastDateValue;
											}
										}
										//获得当前容器
										var orderRefresh = document.getElementById("waitRefresh");
										//当前加载的订单类型
										var flag=2;
										var isfirst;
										if(index == 0){
											flag=2;
											orderRefresh = document.getElementById("waitRefresh");
											isfirst=waitFirstUp;
										}else if(index == 1){
											flag=3;
											orderRefresh = document.getElementById("finishRefresh");
											isfirst=finishFirstUp;
										}else{
											flag=0;
											orderRefresh = document.getElementById("allRefresh");
											isfirst=allFirstUp;
											
										}
										/**
										 * 当首次进入页面没有数据显示的是空页面 但是用户接了单后这个页面停留的时间过长  如果用下拉刷新获得数据则不会有数据
										 */
										if(isfirst){//防止页面停留过长 接单时间小于当前刷新时间 
											pullupRefresh(flag,lastDate,orderContainer,self,isfirst);
										}else{
											pulldownRefresh(flag,lastDate,orderContainer,self);
										}
									},1000);
								}
							},
							up:{
								callback: function() {
									var self= this;
									setTimeout(function() {
										var orderContainer = self.element.querySelector('.orderList');
										var orderRefresh ="";
										var flag=2;
										//获得第一条数据的时间
										var lastDateNode = $(orderContainer).children(".mui-card").eq(-1);
										var lastDate = null;
										if(lastDateNode && lastDateNode.length>0){
											lastDateValue = lastDateNode.attr("data-date-val");
											if(lastDateValue){
												lastDate=lastDateValue;
											}
										}
										if(index == 0){
											flag=2;
											orderRefresh =document.getElementById("waitRefresh");
											if($(".waitempty")){
												self.endPullUpToRefresh(false);
												return;
											}
											//waitSelf=self;
										}else if(index == 1){
											flag=3;
											orderRefresh =document.getElementById("finishRefresh");
											//finishSelf=self;
											if($(".finishempty")){
												self.endPullUpToRefresh(false);
												return;
											}
										}else{
											flag=0;
											orderRefresh = document.getElementById("allRefresh");
											//allSelf=self;
											if($(".allempty")){
												self.endPullUpToRefresh(false);
												return;
											}
										}
										pullupRefresh(flag,lastDate,orderContainer,self);
									},1000);
								}
							}
						});
					});
					
					/**
					 * 页面首次加载获得数据
					 */
					// getOpenDate();
					 
					/**
					 * 上拉加载更多订单
					 * flag:0 :all 2 wait 3:finish
					 */
					function pullupRefresh(flag,firstOrderDate,orderContainer,self,isfirst) {
						//没有数据则不重复查询数据库
						if(flag==2 && waitNodata == true){
							 self.endPullUpToRefresh(false);
							 return;
						}else if(flag==3 && finishNodata == true){
							 self.endPullUpToRefresh(false);
							 return;
						}else if(flag==0 && allNodata == true){
							 self.endPullUpToRefresh(false);
							 return;
						}
						var upPageNum=1;
						API.getOrderUp(shopId,upPageSize,upPageNum,flag,firstOrderDate,function(data){
							var totalPage = data.TOTALPAGE;
							var list = data.LIST;
							//首次下拉刷新 调用上拉加载更多数据
							if(isfirst){
								var content="";
								if(flag == 2){
									content = wait(list,'up');
								}else if(flag == 3){
									content = finish(list,'up');
								}else{//0
									content = all(list,'up');
								}
							    $(orderContainer).append(content);
							    self.endPullDownToRefresh();
							    return;
							}else{
								if(list.length <= 0){
									//TODO
									if(flag==2){
										waitNodata = true;
									}else if(flag==3){
										finishNodata = true;
									}else if(flag==0 ){
										allNodata=true;
									}
									//self.endPullUpToRefresh(true); 
									self.endPullUpToRefresh(false);
									Kit.ui.alert("没有更多数据了");
									return;
								}
								var content="";
								if(flag == 2){
									content = wait(list,'up');
								}else if(flag == 3){
									content = finish(list,'up');
								}else{//0
									content = all(list,'up');
								}
							    $(orderContainer).append(content);
							    self.endPullUpToRefresh(false);
									return;
							}
						});
					}
					/**
					 * 下拉加载最新订单
					 * flag:0 :all 2 wait 3:finish
					 */
					function pulldownRefresh(flag,lastOrderDate,orderContainer,self) {
						var downPageNum=1;
						API.getOrderDown(shopId,downPageSize,downPageNum,flag,lastOrderDate,function(data){
							var list = data.LIST;
							var content="";
							if(flag == 2){
								content = wait(list,'down');
							}else if(flag == 3){
								content = finish(list,'down');
							}else{//0
								content = all(list,'down');
							}								
							$(orderContainer).prepend(content);
							self.endPullDownToRefresh();
						});
					}
					/**
					 * 下拉刷新 倒叙循环list 记录最小的时间        
					 * 上拉加载更多 正序循环list 记录最大的时间  
					 * @param {Object} list
					 * @param {Object} flag
					 */
					function wait(list,flag){
						if($(".waitempty")&&list.length>0){
							$(".waitempty").remove();
						}
						var content ="";
						var index = -1;
						if(flag =="down"){
							index =list.length;
						}
						for(var i = 0;i<list.length;i++){
							
							if(flag =="down"){
								
								--index;
							}else{
								++index;
							}
							var order = list[index];
							
							var orderNum = order.ORDERNUM; 
							var startDate = order.STARTDATE;
							var proSerDeliverDate=order.PROSERDELIVERDATE;
							var userName = order.LINKNAME;
							var tel = order.TEL;
							var address = order.ADDRESS;
							var serTime= order.SERTIME;
							var orderState = order.ORDERSTATE;
							var bgstyle ="color: #000000;";
							var stateZH = "待服务";
							waitFirstUp=false;
							if(orderState == 3){
								bgstyle ="color: #AEAEBB;";
								stateZH="已取消";
							}
							content += ""+
							"<div class='mui-card wait-detail' style='margin-bottom: 10px;' data-orderState-val='"+orderState+"' data-date-val='"+proSerDeliverDate+"' data-val="+orderNum+">"+
								"<ul class='mui-table-view '>"+
									"<a class='mui-navigate-right' style='"+bgstyle+"'>"+
										"<li class='mui-table-view-cell'>"+
											"<span>"+userName+"</span>&nbsp;&nbsp;&nbsp;"+
											"<span>"+tel+"</span>"+
											"<span style='float:right'>"+stateZH+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										    "<span>地址：</span>"+
										    "<span>"+address+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										     "<span>服务时间：</span>"+
										     "<span>"+serTime+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										     "<span>下单时间：</span>"+
										    " <span>"+startDate+"</span>"+
										"</li>"+
									"</a>"+
								"</ul>"+
							"</div>";
						}
						return content;
					}
					/**
					 * 下拉刷新 倒叙循环list 记录最小的时间        
					 * 上拉加载更多 正序循环list 记录最大的时间  
					 * @param {Object} list
					 * @param {Object} flag
					 */
					function finish(list,flag){
						if($(".finishempty")&&list.length>0){
							$(".finishempty").remove();
						}
						var content ="";
						var index = -1;
						if(flag =="down"){
							index =list.length;
						}
						for(var i = 0;i<list.length;i++){
							if(flag =="down"){
								--index;
							}else{
								++index;
							}
						    var order = list[index];
							var orderNum = order.ORDERNUM;
							var startDate = order.STARTDATE;
							var signDate = order.SIGNDATE;
							var proSerDeliverDate=order.PROSERDELIVERDATE;
							var userName = order.LINKNAME;
							var tel = order.TEL;
							var address = order.ADDRESS;
							var serTime= order.SERTIME;
							var orderState = order.ORDERSTATE;
							var bgstyle ="color: #000000;";
							var stateZH = "已完成";
							finishFirstUp=false;
							content += ""+
							"<div class='mui-card wait-detail' style='margin-bottom: 10px;' data-orderState-val='"+orderState+"' data-date-val='"+signDate+"' data-val="+orderNum+">"+
								"<ul class='mui-table-view '>"+
									"<a class='mui-navigate-right' style='"+bgstyle+"'>"+
										"<li class='mui-table-view-cell'>"+
											"<span>"+userName+"</span>&nbsp;&nbsp;&nbsp;"+
											"<span>"+tel+"</span>"+
											"<span style='float:right'>"+stateZH+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										    "<span>地址：</span>"+
										    "<span>"+address+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										     "<span>服务时间：</span>"+
										     "<span>"+serTime+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										     "<span>完成时间：</span>"+
										    " <span>"+signDate+"</span>"+
										"</li>"+
									"</a>"+
								"</ul>"+
							"</div>";
						}
						return content; 
					}
					/**
					 * 下拉刷新 倒叙循环list 记录最小的时间        
					 * 上拉加载更多 正序循环list 记录最大的时间  
					 * @param {Object} list
					 * @param {Object} flag
					 */
					function all(list,flag){
						//如果有新数据则把空列表去掉
						if($(".allempty")&& list.length>0){
							$(".allempty").remove();
						}
						var content ="";
						var index = -1;
						if(flag =="down"){
							index = list.length;
						}
						for(var i = 0;i<list.length;i++){
							if(flag =="down"){
								--index;
							}else{
								++index;
							}
							var order = list[index];
							var orderNum = order.ORDERNUM;
							var startDate = order.STARTDATE;
							var signDate = order.SIGNDATE;
							var proSerDeliverDate=order.PROSERDELIVERDATE;
							var userName = order.LINKNAME;
							var tel = order.TEL;
							var address = order.ADDRESS;
							var serTime= order.SERTIME;
							var orderState = order.ORDERSTATE;
							var bgstyle ="color: #000000;";
							var stateZH = "";
							allFirstUp=false;
							if(orderState == 3){
								bgstyle ="color: #AEAEBB;";
								stateZH="已取消";
							}else if(orderState == 1){
								stateZH="待服务";
							}else{
								stateZH="已完成";
							}
							content += ""+
							"<div class='mui-card wait-detail' style='margin-bottom: 10px;' data-orderState-val='"+orderState+"' data-date-val='"+proSerDeliverDate+"' data-val="+orderNum+">"+
								"<ul class='mui-table-view '>"+
									"<a class='mui-navigate-right' style='"+bgstyle+"'>"+
										"<li class='mui-table-view-cell'>"+
											"<span>"+userName+"</span>&nbsp;&nbsp;&nbsp;"+
											"<span>"+tel+"</span>"+
											"<span style='float:right'>"+stateZH+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										    "<span>地址：</span>"+
										    "<span>"+address+"</span>"+
										"</li>"+
										"<li class='mui-table-view-cell'>"+
										     "<span>服务时间：</span>"+
										     "<span>"+serTime+"</span>"+
										"</li>";
										if(orderState == 2){//完成订单
											content +="<li class='mui-table-view-cell'>"+
													     "<span>完成时间：</span>"+
													    " <span>"+signDate+"</span>"+
													"</li>";
										}else{
											content +="<li class='mui-table-view-cell'>"+
													     "<span>下单时间：</span>"+
													    " <span>"+startDate+"</span>"+
													"</li>";
										}
								content += "</a>"+
								"</ul>"+
							"</div>";
						}
						return content;
					}
					/**
					 * 空白页面 
					 * flag finish wait all
					 */
					function appendEmpty(flag){  
						var content =
							 "<div class='mui-content mui-text-center "+flag+"empty' style='position: relative;top: -59px;'> "+
							    "<ul>"+
							    	"<li><img style='width:100px;'  src='../../static/app/img/menu_bot04_empty.png'/></li>"+
							    	"<li><span>没有订单哟</span></li>"+
							    	"<li>下拉刷新试试吧</li>"+
							    "</ul>"+
							"</div>";
				   		return content;
					}
					/**
					 * 页面首次进来加载数据
					 * 和上拉加载更多类似
					 * @param {Object} flag 0：全部，1：待接单，2：待服务，3：完成 
					 */
					function getAjaxData(flag){
						var upPageNum=1;
						var currentDate = null//Kit.date.getCurrentDate();
						API.getOrderUp(shopId,upPageSize,upPageNum,flag,currentDate,function(data){
							var list = data.LIST;
							if(list.length<=0){
								if(flag == 2){
									$("#waitContainer").append(appendEmpty("wait"));
								}else if(flag == 3){
									$("#finishContainer").append(appendEmpty("finish"));
								}else{
									$("#allContainer").append(appendEmpty("all"));
								}
							}else{
								//对应标签的pageNum需要增加 
								if(flag == 2){
									$("#waitContainer").append(wait(list,"up"));
								}else if(flag == 3){
									$("#finishContainer").append(finish(list,"up"));
								}else{
									$("#allContainer").append(all(list,"up"));
								}
						    }
						});
					}
					/**
					 * 首次页面刷新
					 * flag 0：全部，1：待接单，2：待服务，3：完成
					 */
					function getOpenDate(){
						
						getAjaxData(2); 
						getAjaxData(3);
						getAjaxData(0);
					}
					/**
					 * 注册事件 可以在其他页面调用此方法进行页面的刷新
					 * 此方法刷新了三个列表数据 
					 */
					window.addEventListener("getManageData",function(event){
						shopId = event.detail.shopid;
						//清空数据
						$("#waitContainer").empty();
						$("#finishContainer").empty();
						$("#allContainer").empty();
						//初始化条件
						waitFirstUp = true;
						finishFirstUp = true;
						allFirstUp = true;
						waitNodata = false;
						finishNodata = false;
						allNodata = false;
						getOpenDate();
					});
					
					/**
					 * 为订单添加点击事件
					 */
					mui(".orderList").on('tap','.mui-card',function(){
						var orderNum = $(this).attr("data-val");
						var orderState = $(this).attr("data-orderState-val");
						if(orderState == 1){//正常
							var wait= plus.webview.getWebviewById('views/order/wait.html');
							  //触发详情页面的事件
							  mui.fire(wait,'getWaitData',{
							    shopid:shopId,
							    orderNum:orderNum
							  });
							  //打开详情页面          
							  mui.openWindow({
							  	 id:'views/order/wait.html'
							  });
						}else if(orderState == 2){//完成
							 var finish= plus.webview.getWebviewById('views/order/finish.html');
							  //触发详情页面的事件
							  mui.fire(finish,'getFinishData',{
							    shopid:shopId,
							    orderNum:orderNum
							  });
							 //打开详情页面          
							  mui.openWindow({
							  	 id:'views/order/finish.html'
							  });
						}else{//取消3
						  	var cancel= plus.webview.getWebviewById('views/order/cancel.html');
							  //触发详情页面的事件
							  mui.fire(cancel,'getCancelData',{
							    shopid:shopId,
							    orderNum:orderNum
							  });
							 //打开详情页面          
							  mui.openWindow({
							  	 id:'views/order/cancel.html'
							  });
						} 
					});
				});
		</script> 
	</body>

</html>